<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
    <style>
        .广告版面 {
            position: relative; /* 定位:相对定位 子绝父相定位方法 */

            width: 1000px; /* 宽高 */
            height: 200px;
            background-color: pink; /* 背景色 */
            margin: 100px auto; /* 版心居中 */

            font-size: 50px; /* 文字大小 */
            font-weight: 700; /* 文字加粗 */
            text-align: center; /* 文字水平居中 */
            line-height: 200px; /* 行高以盒子高相同, 效果文字垂直居中 */
        }

        .关闭按钮 {
            position: absolute; /* 定位:相对定位 子绝父相定位方法 */
            right: 20px; /* 定位 偏移量 */
            top: 10px;
            
            width: 20px; /* 宽高 背景色 */
            height: 20px;
            background-color: skyblue;
            
            font-size: 16px; /* 文字大小 */
            text-align: center; /* 文字水平居中 */
            line-height: 20px; /* 行高以盒子高相同, 效果文字垂直居中 */
            
            cursor: pointer; /* 鼠标放到盒子时, 鼠标形状改变 */
        }
    </style>
</head>
<body>
<h3>能够给 DOM元素添加事件监</h3>
<p>
    什么是事件？ <br>
    事件是在编程时系统内发生的动作或者发生的事情 <br>
    比如用户在网页上单击一个按钮
</p>
<h3>什么是事件监听？</h3>
<p>
    就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件 <br>
    比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
</p>
<hr>
<h2>语法：</h2>
<p>
    元素对象.addEventListener('事件类型' , 要执行的函数名 )
</p>
<p>
    事件监听三要素： <br>
    事件源： 那个dom元素被事件触发了，要获取dom元素 <br>
    事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等 <br>
    事件调用的函数： 要做什么事
</p>
<hr>
<p>
    特别注意: <br>
    1. 事件类型要加引号 <br>
    2. 函数是点击之后再去执行，每次点击都会执行一次
</p>
<hr>

<!--演示 点击按钮,有弹窗-->
<button>点击按钮</button> <!-- 按钮标签 -->

<!--案例: 点击X 关闭广告-->
<div class="广告版面">
    我是广告,点击X关闭
    <div class="关闭按钮">X</div>
</div>


<script>
    //获取DOM元素
    const 按钮 = document.querySelector('button')

    // 事件监听
    function 弹窗() {
        alert('点击按钮,我就弹窗~~~~~') // 弹窗信息
    }

    // 对元素 添加一个 事件监听. 这里是点击按钮 弹窗
    按钮.addEventListener('click', 弹窗) //('事件类型' , 要执行的函数名 )

    /*
    案例: 关闭广告
    ①：点击的是关闭按钮
    ②：关闭的是父盒子
    核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素
    */

    //获取DOM元素
    const 关闭按钮 = document.querySelector('.广告版面 .关闭按钮')
    const 广告版面 = document.querySelector('.广告版面')

    // 对元素 添加一个 事件监听. 这里是 点击 隐藏
    关闭按钮.addEventListener('click', function () {
        广告版面.style.display = 'none' // 父级盒子添加,CSS样式 显示:隐藏
    })

</script>
</body>
</html>